<template>
  <div class="about">
    <div class="login-container">
      <div class="login-header">
        <h1>欢迎登录</h1>
      </div>

      <div class="form-group">
        <input
          v-model="name"
          type="text"
          id="username"
          name="username"
          placeholder="请输入用户名"
        />
        <div class="error-message" id="username-error"></div>
      </div>

      <div class="form-group">
        <input
          v-model="pwd"
          type="password"
          id="password"
          name="password"
          placeholder="请输入密码"
        />
        <div class="error-message" id="password-error"></div>
      </div>

      <div class="form-group">
        <input type="text" v-model="yan" placeholder="请输入验证码" />
      </div>
      <div class="remember-me">
        <span>{{ arr }}</span>
        <button @click="apply()">点击生成验证码</button>
      </div>

      <div class="remember-me">
        <input
          type="checkbox"
          id="remember"
          v-model="tis"
          name="remember"
          @click="remeb()"
        />
        <!-- :checked="tis" -->
        <label for="remember">记住账号</label>
      </div>

      <button class="login-btn" @click="load()">登录</button>

      <div class="footer-links">
        <a href="#">忘记密码?</a>
        <span>|</span>
        <a href="#" @click="fn()">注册账号</a>
      </div>
    </div>
  </div>
</template>

<script>
import https from "@/utils/https";
export default {
  data() {
    return {
      name: "",
      pwd: "",
      yan: "",
      users: [],
      tis: false,
      arr: "验证码生成区",
    };
  },
  mounted() {
    // this.tis = localStorage.getItem("is") == 'false' ? false :true
    this.tis = JSON.parse(localStorage.getItem("is"));

    if (localStorage.getItem("name")) {
      (this.name = localStorage.getItem("name")),
        (this.pwd = localStorage.getItem("pwd"));
    }
  },
  methods: {
    apply() {
      https
        .getmassage()
        .then((a) => {
          this.arr = a.msg;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    remeb() {
      this.tis = !this.tis;
      localStorage.setItem("is", this.tis);
      // console.log(localStorage.getItem("is"), this.tis);
    },
    load() {
      // localStorage.setItem("age", "18");
      if (this.name == "") {
        alert("请输入用户名");
        return false;
      } else if (this.pwd == "") {
        alert("请输入密码");
        return false;
      } else if (this.yan == "") {
        alert("请输入验证码");
        return false;
      } else if (this.name != "" && this.pwd != "" && this.yan != "") {
        https
          .loaded({
            vercode: this.yan,
            name: this.name,
            pwd: this.pwd,
          })
          .then((a) => {
            // console.log(a);
            if (a.code == 1) {
              alert("用户名或密码错误");
            } else if (a.code == 3) {
              alert(a.msg);
            } else if (a.code == 0) {
              this.name = a.data[0].user;
              this.pwd = a.data[0].pwd;
              if (this.tis == true) {
                localStorage.setItem("name", this.name);
                localStorage.setItem("pwd", this.pwd);
              } else if (this.tis == false) {
                // localStorage.removeItem("name");
                localStorage.removeItem("pwd");
              }
              localStorage.setItem("age", "18");
              this.$router.push("/home");
            }
          })
          .catch((err) => {
            console.log(err);
          });
        return true;
      }
    },
    //跳转注册页面
    fn() {
      this.$router.push("/create");
    },
  },
};
</script>
<style lang='less' scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.about {
  font-family: "Microsoft YaHei", sans-serif;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.login-container {
  background-color: white;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  width: 400px;
  padding: 40px;
  text-align: center;
}

.login-header {
  margin-bottom: 30px;
  color: #333;
}

.login-header h1 {
  font-size: 28px;
  margin-bottom: 10px;
}

.login-header p {
  color: #666;
  font-size: 14px;
}

.form-group {
  margin-bottom: 20px;
  text-align: left;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  color: #555;
}

.form-group input {
  width: 100%;
  padding: 12px 15px;
  border: 1px solid #ddd;
  border-radius: 5px;
  font-size: 16px;
  transition: border-color 0.3s;
}

.form-group input:focus {
  border-color: #4a90e2;
  outline: none;
}

.captcha-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

.captcha-group input {
  flex: 1;
}

.captcha-img {
  width: 100px;
  height: 40px;
  background-color: #f0f0f0;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Courier New", monospace;
  font-size: 20px;
  letter-spacing: 3px;
  color: #333;
  cursor: pointer;
  user-select: none;
}

.remember-me {
  display: flex;
  align-items: center;
  margin: 20px 0;
  font-size: 14px;
}

.remember-me input {
  margin-right: 8px;
}

.login-btn {
  width: 100%;
  padding: 12px;
  background-color: #4a90e2;
  color: white;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.login-btn:hover {
  background-color: #3a7bc8;
}

.footer-links {
  margin-top: 20px;
  font-size: 14px;
  color: #666;
}

.footer-links a {
  color: #4a90e2;
  text-decoration: none;
  margin: 0 5px;
}

.footer-links a:hover {
  text-decoration: underline;
}

.error-message {
  color: #e74c3c;
  font-size: 13px;
  margin-top: 5px;
  display: none;
}
</style>